import React, { PureComponent, Fragment } from 'react';
import styles from './homePage.less';
import { Row, Col, Alert, Empty, Carousel, Typography, Modal, message } from 'antd';
import { connect } from 'dva';
import party_due from './../../images/party_due.png';
import AddOrEditUser from './upload_code';
import BuildModalTitle from '@/components/BuildModalTitle';
import request from '@/utils/request';
import find from 'lodash/find';
const { Paragraph } = Typography;

@connect(({ devices, loading }) => ({
  devices,
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.scrollInterval = '';
    this.state = {
      url:''
    };
  }
  componentDidMount() {
    this.fetCode()
  }
  fetCode=()=>{
    const that = this;
    request(`/images`, {
      method: 'get',
      params: {
        group:'party_fee_code',
        order_direction:'desc'
      },
    }).then((response) => {
      console.log('296597079920631808',response)
      if (response.status === 200) {
        that.setState({
          url: response.data.data[0].path,

        });
      }
    });
  }
  handleAdd = () => {
    const formValues = this.AddForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    let formData = new FormData();
    if (formValues.file) {
      formData.append('file', formValues.file.file);
    } else {
      message.error('请先选择图片');
      return false;
    }
    formData.append('group', 'party_fee_code');
    request(`/images`, {
      method: 'POST',
      data: formData,
    }).then((response) => {
      if (response.status === 200) {
        console.log('添加图片成功');
        message.success('修改缴费二维码成功');
        that.setState({
          addModal: false,
          url:response.data.data.path
        });

      }
    });

  };




  render() {
    return <div style={{width:'100%',height:'100%',background:'#f0f2f5',position:'relative'}}>
      <div style={{position:'absolute',left:'50%',top:'50%',    transform:'translate(-50%, -50%)'}}>
        <div><img style={{width:'400px'}} src={this.state.url} alt=""/></div>
        {
          find(this.permissions, { name: 'party_fee_code_edit' })&&<p onClick={()=>{
            this.setState({
              addModal: true
            })
          }
          } style={{cursor:'pointer',textAlign:'center',marginTop:'10px',fontSize:'16px',color:'blue',textDecoration:'underline'}}>
            修改缴费二维码
          </p>
        }
        <p style={{textAlign:'center',marginTop:'16px',fontSize:'20px'}}>缴纳党费时请备注
          <span style={{color:'red',fontWeight:'bold'}}> “党费月份” </span> 及<span style={{color:'red',fontWeight:'bold'}}> “真实姓名”</span></p>
      </div>
      <Modal
        title={<BuildModalTitle visible={this.state.addModal} modalClass="addModal" title="修改缴费二维码"/>}
        className="addModal"
        visible={this.state.addModal}
        centered
        onCancel={() => {
          this.setState({ addModal: false });
        }}
        onOk={this.handleAdd}
      >
        <AddOrEditUser
          wrappedComponentRef={(inst) => this.AddForm = inst}/>

      </Modal>
    </div>


  }
}

export default BasicList;
